import * as React from 'react';
import './pinglun.less';
import axios from 'axios';
import { Popup, Toast } from 'antd-mobile';
export interface IAppProps {}

export default class Pinglun extends React.Component<IAppProps> {
  state = {
    listarr: [],
    visible: false,
  };

  componentDidMount() {
    this.getGreetList();
    setInterval(() => {
      let listarr = this.state.listarr;
      listarr.push(this.state.listarr[0]);
      this.setState({ listarr: listarr.slice(1) });
    }, 2000);
  }
  getSnapshotBeforeUpdate(oldProps: any, oldState: any) {
    let scrollarea = document.querySelector('.scrollarea') as HTMLAreaElement;
    return scrollarea.scrollHeight;
  }
  componentDidUpdate(oldProps: any, oldState: any, val: any) {
    let scrollarea = document.querySelector('.scrollarea') as HTMLAreaElement;
    scrollarea.scrollTop += scrollarea.scrollHeight - val + 1;
  }
  getGreetList = async () => {
    let {
      data: { data },
    } = await axios.get('http://localhost:3000/gretting');
    this.setState({ listarr: data });
  };
  addGreet = async () => {
    let name = document.querySelector('.xingming') as HTMLInputElement;
    let desc = document.querySelector('.zhufu') as HTMLInputElement;
    if (!name.value) return Toast.show({ content: '请输入姓名' });
    if (!desc.value) return Toast.show({ content: '请输入祝福语' });
    await axios.post('http://localhost:3000/gretting', {
      name: name.value,
      desc: desc.value,
    });
    Toast.show({ icon: 'success', content: '祝福成功!' });
    this.setState({ visible: false });
    name.value = '';
    desc.value = '';
    this.getGreetList();
  };
  public render() {
    return (
      <div className="pinglun">
        <div className="scrollarea">
          {this.state.listarr.map((item: any, index: number) => {
            return (
              <div key={index}>
                <span>
                  {item.name}: {item.desc}
                </span>
              </div>
            );
          })}
        </div>
        <div className="liuyanban">
          <div
            className="inputs"
            onClick={() => this.setState({ visible: true })}
          >
            留下你的祝福...
          </div>
          <div className="liwu"></div>
          <div className="xiaoxi"></div>
        </div>
        <Popup
          visible={this.state.visible}
          onMaskClick={() => {
            let name = document.querySelector('.xingming') as HTMLInputElement;
            let desc = document.querySelector('.zhufu') as HTMLInputElement;
            name.value = '';
            desc.value = '';
            this.setState({ visible: false });
          }}
          bodyStyle={{
            borderTopLeftRadius: '16px',
            borderTopRightRadius: '16px',
            height: '18vh',
            boxSizing: 'border-box',
            padding: '0.15rem',
          }}
        >
          <div className="names">
            <input type="text" placeholder="你的姓名" className="xingming" />
          </div>
          <div className="descs">
            <input type="text" placeholder="你的祝福" className="zhufu" />
            <button onClick={this.addGreet}>发送</button>
          </div>
        </Popup>
      </div>
    );
  }
}
